<template>
  <el-config-provider :locale="locale">
    <div id="app">
      <router-view />
      <!-- 登录 -->
      <el-drawer
        v-model="loginVisible"
        :modal="false"
        :close-on-click-modal="false"
        @closed="handleClose"
        style="min-width: 500px; padding: 0 50px;"
      >
        <Login />
      </el-drawer>
    </div>
  </el-config-provider>
</template>

<script setup>
import { shallowRef, watch, toRefs } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Login from '@/views/login/index.vue'
import { useUser } from '@/store/user'

const userStore = useUser()
const { showLogin } = toRefs(userStore)

/**
 * 全局登录弹窗
 */
const locale = zhCn
const loginVisible = shallowRef(false)

function handleClose () {
  userStore.setShowLogin(false)
}
watch(
  () => showLogin.value,
  (_nVal) => {
    loginVisible.value = _nVal
  }
)

</script>
